window.addEventListener("load", function () {

    let oldUrl = "";
    let api = $(".api li")
    api.forEach(function (v) {
        v.addEventListener("mouseover", function () {
            this.style.backgroundColor = "#2f7ee9";
            this.style.color = "#fff";
            let imgUrl = this.firstElementChild.src;
            //  let str = imgUrl.slice(imgUrl.lastIndexOF("."));
            this.firstElementChild.src = imgUrl.replace(".png", "-c.png");
            oldUrl = imgUrl;
        })
        v.addEventListener("mouseout", function () {
            this.style.backgroundColor = "#fff";
            this.style.color = "#000";
            this.firstElementChild.src = oldUrl;
        })
    })

    // 返回顶部

    let tops = $(".tops")
    let top = $(".top")
    //    按钮移入
    top.addEventListener("mouseover", function () {
        this.className = "tops"
    })
    //按钮 移除
    top.addEventListener("mouseout", function () {
        this.className = "top"
    })

    // 判断浏览器高度
    this.window.addEventListener("scroll", function () {
        if (window.scrollY >= 400) {
            top.style.display = "block" //显示
        }
        else {
            top.style.display = "none"//隐藏
        }
    })

    // 点击返回顶部
    top.addEventListener("click", function () {
        window.scroll({
            left: 0,
            top: 0,
            behavior: "smooth"
        })
    })
    //  独角兽轮播图
    const yh = $(".safea");
    yh[0].style.opacity = "1"; // 默认显示第0个
    let index = 1; // 设置索引变量
    // 2.设置周期定时器每隔3秒显示
    this.window.setInterval(function () {
        // 3.排他思想，不管当前谁显示，每一个周期都先让所有消失
        yh.forEach(function (v) {
            v.style.opacity = "0";
        });
        // 4.通过索引显示对应内容，其他不显示
        yh[index].style.opacity = "1";
        // 5.每隔一个周期索引变量就++
        index++;
        // 6.当索引达到最大限度时要回复初始状态
        if (index > yh.length - 1) {
            index = 0;
        }
    }, 3000);

    var mySwiper = new Swiper('.swiper', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })

})